<template>
  <div>
    <el-dialog
        :title="formData.id ? '编辑保障性住房申请' : '新增保障性住房申请'"
        :visible.sync="dialogVisible"
        width="800px"
        :close-on-click-modal="false"
        @close="onClose"
    >
      <el-form
          ref="form"
          :model="formData"
          :rules="formRules"
          label-width="140px"
          size="small"
      >
        <el-card shadow="never" style="margin-bottom: 20px;">
          <div slot="header" class="clearfix">
            <span style="font-weight: bold;">基本信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="姓名" prop="name">
                <el-input v-model="formData.name" placeholder="请输入姓名" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="身份证号码" prop="id_card">
                <el-input v-model="formData.id_card" placeholder="请输入身份证号码" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="性别" prop="gender">
                <el-select v-model="formData.gender" placeholder="请选择性别">
                  <el-option label="男" value="男" />
                  <el-option label="女" value="女" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系电话" prop="phone">
                <el-input v-model="formData.phone" placeholder="请输入联系电话" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="婚姻状况" prop="marital_status">
                <el-select v-model="formData.marital_status" placeholder="请选择婚姻状况">
                  <el-option label="未婚" value="未婚" />
                  <el-option label="已婚" value="已婚" />
                  <el-option label="离异" value="离异" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="学历" prop="education">
                <el-input v-model="formData.education" placeholder="请输入学历" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="参加工作时间" prop="work_start_date">
                <el-date-picker
                    v-model="formData.work_start_date"
                    type="date"
                    placeholder="选择参加工作时间"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="户籍所在地" prop="household_location">
                <el-input v-model="formData.household_location" placeholder="请输入户籍所在地" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="工作单位" prop="work_unit">
                <el-input v-model="formData.work_unit" placeholder="请输入工作单位" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <el-card shadow="never" style="margin-bottom: 20px;" v-if="formData.id">
          <div slot="header" class="clearfix">
            <span style="font-weight: bold;">审核信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="审核状态" prop="status">
                <el-select v-model="formData.status" placeholder="请选择审核状态">
                  <el-option label="待审核" :value="0" />
                  <el-option label="审核通过" :value="1" />
                  <el-option label="审核拒绝" :value="2" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="审核人" prop="reviewer">
                <el-input v-model="formData.reviewer" placeholder="请输入审核人" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="审核备注" prop="review_remark">
                <el-input
                    v-model="formData.review_remark"
                    type="textarea"
                    :rows="3"
                    placeholder="请输入审核备注"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="onClose">取消</el-button>
        <el-button type="primary" @click="onSubmit" :loading="submitLoading">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { http } from "@/api";

export default {
  name: "AffordableHousingAdd",
  data() {
    return {
      dialogVisible: false,
      submitLoading: false,
      formData: {
        name: '',
        id_card: '',
        gender: '',
        household_location: '',
        phone: '',
        marital_status: '',
        education: '',
        work_start_date: null,
        work_unit: '',
        status: 0,
        review_remark: '',
        reviewer: ''
      },
      formRules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        id_card: [
          { required: true, message: '请输入身份证号码', trigger: 'blur' },
          { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入正确的身份证号', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          { pattern: /^1[3|4|5|6|7|8|9][0-9]{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
        ],
        work_unit: [
          { required: true, message: '请输入工作单位', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    open(data) {
      this.dialogVisible = true;
      if (data) {
        this.formData = { ...data };
        // 格式化日期字段
        if (this.formData.work_start_date) {
          this.formData.work_start_date = this.formData.work_start_date.split('T')[0];
        }
      }
    },
    onClose() {
      this.dialogVisible = false;
      this.$refs.form.resetFields();
      this.formData = {
        name: '',
        id_card: '',
        gender: '',
        household_location: '',
        phone: '',
        marital_status: '',
        education: '',
        work_start_date: null,
        work_unit: '',
        status: 0,
        review_remark: '',
        reviewer: ''
      };
    },
    async onSubmit() {
      try {
        await this.$refs.form.validate();
        this.submitLoading = true;

        const submitData = { ...this.formData };

        if (this.formData.id) {
          await http.affordableHousing.update(this.formData.id, submitData);
        } else {
          await http.affordableHousing.create(null, submitData);
        }

        this.$message.success('操作成功');
        this.$emit('get-page');
        this.onClose();
      } catch (error) {
        console.error('操作失败:', error);
        if (error.response && error.response.data && error.response.data.message) {
          this.$message.error(error.response.data.message);
        } else {
          this.$message.error('操作失败');
        }
      } finally {
        this.submitLoading = false;
      }
    }
  }
};
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>
